<template>
  <div class="echarts-containter">
    <!-- 捐赠人部分 -->
    <div class="part1">
      <div class="flex">
        <div class="right">
          <div class="title">捐精人与捐卵人分布</div>
          <donorComposition />
        </div>
        <div class="middle">
          <div class="title">新鲜精子与冷冻精子比例</div>
          <spermFreshFrozenIngredients />
        </div>
        <div class="left">
          <div class="title">新鲜卵子与冷冻卵子比例</div>
          <eggFreshFrozenIngredients />
        </div>
      </div>
    </div>
    <!-- 准父母部分 -->
    <div class="part2">
      <div class="flex">
        <div class="left">
          <div class="title">准父母地域分布</div>
          <geographicalDistribution />
        </div>
        <div class="middle">
          <div>
            <div class="title">准父母性别分布</div>
            <genderDistribution />
          </div>
        </div>
        <div class="right">
          <div class="title">准父母年龄分布</div>
          <ageDistribution />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, onMounted } from "vue";
import { useUserStore } from "@/store/modules/user";
import donorComposition from "@/views/echarts/donorComposition.vue";
import eggFreshFrozenIngredients from "@/views/echarts/eggFreshFrozenIngredients.vue";
import spermFreshFrozenIngredients from "@/views/echarts/spermFreshFrozenIngredients.vue";
import ageDistribution from "@/views/echarts/ageDistribution.vue";
import geographicalDistribution from "@/views/echarts/geographicalDistribution.vue";
import genderDistribution from "@/views/echarts/genderDistribution.vue";

import { storeToRefs } from "pinia";
const userStore = useUserStore();
</script>

<style lang="scss" scoped>
.echarts-containter {
  padding: 20px 20px;

  margin: 0px 20px;
  overflow: visible; // 关键：允许内容溢出

  &::after {
    // 清浮动，防止高度塌陷
    content: "";
    display: table;
    clear: both;
  }
  .part1,
  .part2 {
    float: left;
    margin-top: 30px;
    // 占父容器 98%

    .title {
      font-size: 1em;
      font-family: sans-serif;
      font-weight: bold; // 关键：加粗
      margin-bottom: 30px;
      text-align: center;
    }
    .flex {
      display: flex;
      gap: 0; /* 如果之前设置过 gap，可保留或删除 */
      padding: 0 20px; /* 左右各 20px 的留白 */
    }
  }
}
</style>
